---
permalink: "/behaviors/basic/deselect/index.xml"
tags: "Behaviors/Basic/Triggers"
hv_title: "Deselect"
hv_button_behavior: "back"
---
{% extends 'templates/scrollview.xml.njk' %}

{% block styles %}
  <style id="select" marginTop="24" />
  <style
    id="select-separator"
    borderTopColor="#e1e3e3"
    borderTopWidth="1"
    marginLeft="24"
    marginRight="24"
  />
  <style
    id="select-option"
    alignItems="center"
    flex="1"
    flexDirection="row"
    justifyContent="space-between"
    paddingBottom="16"
    paddingLeft="24"
    paddingRight="24"
    paddingTop="16"
  />
  <style
    id="select-radio-outer"
    borderColor="#bdc4c4"
    borderRadius="10"
    borderWidth="1"
    height="20"
    width="20"
  >
    <modifier pressed="true">
    <style borderColor="#8d9494" borderWidth="1" />
    </modifier>
    <modifier selected="true">
    <style borderColor="#4778ff" borderWidth="2" />
    </modifier>
  </style>
  <style
    id="select-radio-inner"
    borderRadius="5"
    height="10"
    marginLeft="3"
    marginTop="3"
    opacity="0"
    width="10"
  >
    <modifier selected="true">
    <style backgroundColor="#4778ff" opacity="1" />
    </modifier>
  </style>
  <style
    id="select-label"
    color="#4e4d4d"
    fontSize="16"
    fontWeight="normal"
    lineHeight="18"
  >
    <modifier selected="true">
    <style color="#312f2f" />
    </modifier>
    <modifier pressed="true">
    <style color="#312f2f" />
    </modifier>
  </style>
  <style
    id="container-style"
    borderColor="#e1e1e1"
    borderRadius="16"
    borderWidth="2"
    margin="24"
    padding="24"
  />

{% endblock %}

{% block content %}
  {% include './_deselect-single/index.xml.njk' %}
  {% include './_deselect-multiple/index.xml.njk' %}
{% endblock %}
